<template>
	<view class="cunqinjianjie">
			<div class="navigation">
						<a @click='clickNav(index)' v-for='(item,index) in navList' :key='index' :class="[index===currentIndex ? 'cunct':'']">{{item.navname}}</a>

					</div>
					
					 <!-- Swiper -->
					    <!-- 1.村情简介 -->
						<div v-if='dataList1.length' class="swiper-container" style=" display: block;">
 
						  <uni-swiper-dot :info="dataList1" :current="current"  :mode="mode">
						      <swiper class="swiper-box" @change="change">
						          <swiper-item class="swiper-slide" v-for="(item ,index) in dataList1" :key="index">
						              <view class="swiper-item">
						                 <img :src="item.image">
						              </view>
						          </swiper-item>
						      </swiper>
						  </uni-swiper-dot>
					       
					    </div>
					
					<!-- 2.组织架构 -->
					<div v-if='dataList2.length' class="swiper-container" style=" display: none">
					    <uni-swiper-dot :info="dataList2" :current="current"  :mode="mode">
					        <swiper class="swiper-box" @change="change">
					            <swiper-item class="swiper-slide" v-for="(item ,index) in dataList2" :key="index">
					                <view class="swiper-item">
					                   <img :src="item.image">
					                </view>
					            </swiper-item>
					        </swiper>
					    </uni-swiper-dot>
					   
					   
					</div>
	</view>
</template>
<script>
	export default {
		data() {
		        return {
		            dataList1: [],//村情简介
					dataList2:[],//组织架构
		            current: 0,
		            mode: 'nav',
					navList:[
						{
							navname:'村情简介'
						},
						{
							navname:'组织架构'
						}
					],
					currentIndex:0
					
		        }
		    },
		    methods: {
		        change(e) {
		            this.current = e.detail.current;
		        },
				clickNav(inde){
					this.currentIndex = inde
					// console.log(this.$el.querySelectorAll('.swiper-container'))
					 this.$el.querySelectorAll('.swiper-container').forEach((item,index)=>{
						if(index === this.currentIndex){
							item.style.display = "block"
						}else{
							item.style.display = "none"
						}
					}) 
				},
				//获取数据村情简介数据
				getPageCunQin() {
					this.$http.getCunQingJianJie({
							type: 'pageItemOne'
						})
						.then(res => {
							this.loading =false
							const {
								data,
								msg
							} = res
							this.dataList1 = data
                            console.log(data)
						})
				},
				//获取数据组织架构数据
				getPageZuZhi() {
					this.$http.getCunQingJianJie({
							type: 'pageItemTow'
						})
						.then(res => {
							this.loading =false
							const {
								data,
								msg
							} = res
							this.dataList2 = data
							
				
						})
				},
		    },
		created() {
		 this.getPageCunQin()//获取数据村情简介数据
		 this.getPageZuZhi()//获取数据组织架构数据
		},
		
	}
</script>

<style lang="scss" scoped>
	  @import '@/common/css/public.scss';
	 
</style>
